<template>
  <div id="app">
	 <el-form :inline="true" :model="formData" ref="formDataRef" class="demo-form-inline">
	   <el-form-item label="表名" prop = "tableName">
	     <el-select v-model="formData.tableName" @change="change" placeholder="请选择-表名">
	     		  <el-option
	     			v-for="item in tableNames"
	     			:key="item.TABLE_NAME"
	     			:label="item.TABLE_NAME"
	     			:value="item.TABLE_NAME">
	     		  </el-option>
	     </el-select>
	   </el-form-item>
	   <el-form-item label="查询列名" prop = "column">
	     <el-select v-model="formData.column" placeholder="请选择-列名">
	       		  <el-option
	       			v-for="item in tableColumns"
	       			:key="item.COLUMN_NAME"
	       			:label="item.COLUMN_NAME"
	       			:value="item.COLUMN_NAME">
	       		  </el-option>
	     </el-select>
	   </el-form-item>
	   <el-form-item label="查询列内容" prop = "data">
	     <el-input v-model="formData.data"></el-input>
	   </el-form-item>
	   <el-form-item >
	     <el-button v-if="'' != formData['column'] && '' != formData['data']" type="primary" @click="onSubmit">查询</el-button>
		 <el-button type="primary" round @click="clear">清空</el-button>
	   </el-form-item>
	 </el-form>
	  <el-table
	     :data="infoList"
	     style="width: 100%">
			 <el-table-column
			   v-for="column in tableColumns"
			   :prop="column.COLUMN_NAME"
			   :label="column.COLUMN_NAME+'('+column.COLUMN_TYPE+')'"
			   >
			 </el-table-column>
			 <el-table-column v-if="tableColumns.length > 0 "
			   fixed="right"
			   label="操作"
			   width="100"
			   key="slot">
			  <template #default="scope" v-if="'' != formData['column'] && '' != formData['data']">
				 <el-button @click="priviewSql(scope.row)" type="text" size="small">sql预览</el-button>
<!-- 				 <el-button type="text" @click="priviewSql(scope.row)">sql预览</el-button>
 -->			   </template>
			 </el-table-column>
	   </el-table>
	   <el-dialog
	     title="sql预览"
	     v-model="dialogVisible"
		 @opened="open"
	     :before-close="handleClose">
	     <!-- <span>{{deleteSql}}</span><br>
		 <span>{{insertSql}}</span> -->
		 <textarea v-if="dialogVisible" ref="mycode" v-model="sql" placeholder="按Ctrl键进行代码提示" class="codesql"/>
	     
	   </el-dialog>
  </div>
</template>

<script>
import 'codemirror/theme/ambiance.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/hint/show-hint.css'
 
const CodeMirror = require('codemirror/lib/codemirror')
require('codemirror/addon/edit/matchbrackets')
require('codemirror/addon/selection/active-line')
require('codemirror/mode/sql/sql')
require('codemirror/addon/hint/show-hint')
require('codemirror/addon/hint/sql-hint')

import { getInfoData, queryTables, queryTableColumns, queryDataByParams } from '@/services/service' // 引入接口
export default {
  name: 'app',
  data() {
    return {
      infoList: [],
	  tableNames: [],
	  tableColumns: [],
	  formData: {
		  tableName: '',
		  column: '',
		  data: ''
	  },
	  insertSql: '',
	  deleteSql: '',
	  sql: '',
	  dialogVisible: false
    }
  },
  methods: {
    async getInfoData(vlue) {
      const result = await getInfoData(vlue)
      this.infoList = result.data
    },
	async queryTables(){
	  const result = await queryTables()
	  this.tableNames = result.data
	},
	async queryTableColumns(tableName){
	  const result = await queryTableColumns(tableName)
	  this.tableColumns = result.data
	},
	async queryDataByParams(formData){
		const result = await queryDataByParams(formData)
		this.infoList = result.data
	},
	change(vlue){
		this.formData['column'] = ''
		this.formData['data'] = ''
		this.queryTableColumns(vlue)
		this.getInfoData(vlue)
	},
	onSubmit() {
		this.queryTableColumns(this.formData['tableName'])
		 this.queryDataByParams(this.formData)
	},
	clear(){
		 if (this.$refs['formDataRef'] !== undefined) {
			this.$refs['formDataRef'].resetFields()
			this.tableColumns = []
			this.infoList = []
		}
	},
	downloadByParams(value){
		var deleteSql = 'DELETE FROM ' + this.formData['tableName'] + ' WHERE ' + this.formData['column'] + ' = "' + this.formData['data'] + '"'
		var insertSql = 'INSERT INTO ' + this.formData['tableName'] + ' ('
		this.tableColumns.filter(v=>{
			insertSql += v.COLUMN_NAME + ','
		})
		insertSql = insertSql.slice(0,insertSql.length-1)+')';
		insertSql = insertSql + ' VALUES ('
		this.tableColumns.filter(v=>{
			if(v.COLUMN_TYPE.includes('varchar')){
				insertSql += '"' + value[v.COLUMN_NAME] + '",'
			} else{
				insertSql += value[v.COLUMN_NAME] + ','
			}
			
		})
		insertSql = insertSql.slice(0,insertSql.length-1)+')';
		this.deleteSql = deleteSql
		this.insertSql = insertSql
		this.sql = this.deleteSql + '; \n' + this.insertSql + '; \n'+ 'COMMIT;'
	},
	priviewSql(row){
		this.dialogVisible = true
		this.downloadByParams(row)
	},
	handleClose(done) {
	  done()
	},
	open(){
		const mime = 'text/x-mariadb'
		if(null != this.$refs['mycode']){
			this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
			  mode: mime, 
			  indentWithTabs: true,
			  smartIndent: true,
			  lineNumbers: true,
			  matchBrackets: true,
			  autofocus: true
			})
			this.editor.setSize('100%','100%')
		}
	}
  },
  mounted() {
	this.queryTables()
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
/* .codesql {
	width: 100%;
} */
.CodeMirror-scroll {
	text-align: left;
}
</style>